<template>
	<view class="conbox">
		<view class="container">
			
			<!-- 背景 -->
			<image src="../../static/img/bg.jpg" class="cont" mode="widthFix"></image>
			<image src="../../static/img/caidai.png" class="caidai" mode=""></image>
			<view class="title">
				抽奖轮盘
			</view>
			<view class="uni-btn-icon" @tap="backClick"></view>
			<view class="header">
				<view class="rule" @tap="showRuleDialog">
					<text >规则</text>
				</view>
				
				<view class="info">
				<view class="times">
					还可抽奖： <text>{{lotteryTimes}}</text>次
				</view>
				<view class="my-prize" @click="showMyPrizeDialog">
					我的奖品<text class="lg cuIcon-right"></text>
				</view>
				</view>
				 
			</view>
			<view class="main">
				<view class="canvas-container">
					<canvas class="canvas"  canvas-id="canvas" :animation="animationData"  :style="'width:'+canvasWidth+'px;height:'+canvasHeight+'px;'"></canvas>
					<image @click="startLottery(30, callback)" :src="isClicked?'../../static/img/start_disabled.png':'../../static/img/start.png'" id="start"></image>
				</view>
			</view>
			
			<view class="mission-list">
				<image class="mission-title" src="../../static/img/mission_title.png"  mode="widthFix"></image>
				<view class="title grid col-3">
					<view>内容</view>
					<view>奖励次数</view>
					<view>状态</view>
				</view>
				<view class="mission grid col-3">
					<view>完成每日签到</view>
					<view>1</view>
					<view><text class="mission-button" :class="isSignIn?'disabled':''" @tap="signIn">{{isSignIn?'完成':'前往'}}</text></view>
				</view>
				<view class="mission grid col-3">
					<view>做任务</view>
					<view>1</view>
					<view><text class="mission-button" @tap="mission">前往</text></view>
				</view>
				<view class="mission grid col-3">
					<view>兑换商品</view>
					<view>1</view>
					<view><text class="mission-button" @tap="integralMall">前往</text></view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="showRule?'show':''"  @tap="hideRuleDialog">
			<view class="cu-dialog rule-dialog"> 
				<!-- 规则 -->
				<view class="rule-container" >
					<view class="title" >
						规则说明
					</view>
					<view class="g_item">
						1、用户每天签到即送1次抽奖机会，或完成对应任务获得抽奖机会，每天零时将清空获得的抽奖次数。
					</view>
					<view class="g_item">
						2、用户可以消耗10积分获取1次抽奖机会。
					</view>
					<view class="g_item">
						3、用户点击大转盘抽奖按钮，每抽一次消耗1次抽奖机会。
					</view>
					<view class="g_item">
						4、用户获得的奖品，可在我的奖品里查看。
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="showMyPrize?'show':''"  @tap="hideMyPrizeDialog">
			<view class="cu-dialog my-prize-dialog">
				<view class="title">
					我的奖品
				</view>
				<view class="itembox">
					<view class="item" v-for="(items,i) in myPrizelist" :key="i">
						<text class="left">{{items.awardsName}}</text>
						<text class="right">{{items.createTime}}</text>
					</view>
				</view>
				<view class="no-prize" v-if="myPrizelist.length==0 && showNoPrize">
					您还没有获得奖品
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var turntable = require("../../lib/turntable.js");
	export default {
		data() {
			return {
				awardsList: {},
				lotteryTimes: 0,
				isSignIn:false,
				showMyPrize:false,
				myPrizelist:[],
				showNoPrize:false,
				showRule:false,
				turntable:null,
				canvasWidth:0,
				canvasHeight:0,
				inLottery:false,
				deg: 0,
				result: 0,
				lastResult: 0,
				animationData: {},
				isClicked: false,
			}
		},
		onLoad: function() {
			var that=this;
			uni.getSystemInfo({
			    success: function (res) {
					that.canvasWidth=res.windowWidth-(res.windowWidth/100*10);
					that.canvasHeight=res.windowWidth-(res.windowWidth/100*10);
					// 获取奖品列表
					that.initdata();
			    }});
			
		},
		onPullDownRefresh:async function(){
			// 获取奖品列表
			await this.initdata();
			uni.stopPullDownRefresh();
		},
		methods: {
			// 查看奖品
			getMyPrize(){
				var that = this
				that.$lotteryApi.myPrizeList().then(res=>{
					that.myPrizelist = res
					that.showNoPrize=true;
				}).catch(()=>{
					that.showNoPrize=true;
				});
			},
			showRuleDialog(){
				this.showRule=true;
			},
			hideRuleDialog(){
				this.showRule=false;
			},
			showMyPrizeDialog(){
				this.getMyPrize();
				this.showMyPrize=true;
			},
			hideMyPrizeDialog(){
				this.showNoPrize=false;
				this.showMyPrize=false;
			},
			// 初始化抽奖数据
			initdata:function(){
				var that = this;
				that.$lotteryApi.list().then(res=>{
					that.lotteryTimes=res.times;
					that.isSignIn=res.signInStatus;
					that.awardsList = res.awardsList.reverse();
					var diskColor=[];
					
					for (var i = 0; i < that.awardsList.length; i++) {
						diskColor.push(that.awardsList[i].diskColor);
					} 
					
					// 画转盘
					var width=that.canvasWidth;
					var height=width;
					that.turntable=turntable.wheelSurf("canvas",{$this:that,list:that.awardsList,width:width,height:height,outerCircle: {
					     color: '#F95151' // 外圈颜色(可选)
					 },
					 innerCircle: {
					     color: '#B33E0A' // 里圈颜色(可选)
					 },
					 dots: ["#FBF0B0", "#FFFFFF"], // 装饰点颜色(可选)
					 disk: diskColor, //中心奖盘的颜色，默认7彩(可选)
					 // disk: ["#FAFAFA","#BCF489","#EFB88E", "#EBE993", "#82E7D4","#19BD9F", "#16B960"], //中心奖盘的颜色，默认7彩(可选)
					// disk: ["#EE904A", "#D3D03D","#8AD049", "#16B960","#19BD9F","#17ABC1", "#EB678D","#F0675D"], //中心奖盘的颜色，默认7彩(可选)
					 title: {
					     color: '#B14A29',
					     font: '13px Arial',
					     lineHeight:13
					 }});
				});
			},
			/* 开始旋转抽奖 */
			startLottery(angel, callback) {
				console.log('=============');
			    if (this.isClicked) {
			        //已经点击了
			        console.log("点击太频繁啦");
			        return;
			    }
			    this.isClicked = true;
			
			    let animation = uni.createAnimation({
			        transformOrigin: "50% 50%",
			        duration: 3000,
			        timingFunction: "ease-in-out",
			        delay: 0,
			    });
			    this.animationData = animation;
			    this.animationData.rotate(0).rotate(this.randomNum()).step();
			    this.animationData = this.animationData.export();
				
			
			    setTimeout(() => {
			        this.callback()
			    }, 3000);
			},
			callback(){
				console.log('执行了');
				this.isClicked = false
				uni.showModal({
				    title: '提示',
					showCancel:false,
				    content: '当前抽中的物品为' + this.result,
				    success: function (res) { }
				});
			},
			/* 获取随机数 */
			randomNum() {
			    this.result = Math.floor(Math.random() * 6) + 1; //数组索引：[0,5]
				console.log('result', this.result);
			    if (this.result > this.lastResult) {
			        this.deg += 360 * 4 + (this.result - this.lastResult) * 60;
			    } else {
			        this.deg += 360 * 4 + 360 - (this.lastResult - this.result) * 60;
			    }
			    this.lastResult = this.result;
			    return this.deg;
			},
			backClick(){
				uni.navigateBack();
			}
		}

	}
</script>
<style scoped>
	.uni-btn-icon{
		color: #fff; 
		font-size: 27px;
		position: absolute;
		top:2.5vw;
		left:2vw;
	}
	.title{
		position: relative;
		width:100%;
		text-align: center;
		padding-top:3vw;
		font-size: 18px;
		color: #fff;
	}
	
	.conbox {
		width: 750upx;
		height: 100vh;
		background-color: #FC3459;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.container,
	image.cont {
		width: 750upx;
		height: auto;
		position: relative;
	}

	image.cont {
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 20px;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	.header {
		/* height: 246upx; */
		padding-top: 75upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}
	
	
	
	
	.header .rule{
		padding:15upx 10upx 15upx 60upx;
		color:#FFFFFF;
		background-color: #FFC000;
		border-radius: 40upx;
		margin-left:-45upx;
		width:160upx
		
	}
	.header .info{
		padding: 100upx 30upx 0upx 30upx; 
		width:100%; 
		color:#FEE40B;
	}
	
	
	.header .times{
		float:left;
		font-size: 35upx;
		font-weight: bold;
	}
	.header .times text{
		color:#FFFFFF;
	}
	
	
	.header .my-prize{
		float:right;
		font-size: 35upx;
		font-weight: bold;
	}
	.header .my-prize text{
		color:#FFFFFF;
	}

	/* 转盘 */
	.canvas-container {
		width: 90%;
		margin: 0 5%;
	}

	.canvas {
		/* width: 100%!important; */
		/* transform: rotate(1560deg); */
		transition: -webkit-transform 3000ms ease-in-out, transform 3000ms ease-in-out;
		transform-origin: 50% 50%;
	}
 
#start{
	  position: absolute;
	            top: calc(50% - 15vw);
	            left: 50%;
	            width:18vw;
	            height:29vw;
	            margin-left: -9vw;
	            margin-top: -15vw;
	            cursor: pointer;
}
	
	.rule-dialog{
		background-color: transparent!important;
	}

	.rule-container {
		min-height: 300upx;
		display: flex;
		flex-direction: column;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		padding:30upx;
		/* box-sizing: border-box; */
		color: #fff;
	}

	.rule-container .title {
		text-align: center;
		margin-bottom: 36upx;
		font-size: 40upx;
	}

	.rule-container .g_item {
		font-size: 30upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
		margin-bottom: 10px;
	}
	

	.shadowbox {
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, .6);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.my-prize-dialog {
		width: 600upx;
		min-height: 180upx;
		background: #FFEEDF;
		border: 10upx solid #F2692F;
		color: #333;
		font-size: 24upx;
		font-family: PingFang-SC-Medium;
		border-radius: 40upx;
		padding-bottom: 20upx;
	}

	.my-prize-dialog .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding: 36upx 0;
		justify-content: center;
	}

	.my-prize-dialog .itembox {
		max-height: 1320upx;
		overflow-y: auto;
	}

	.my-prize-dialog .item {
		width: 100%;
		height: 66upx;
		padding: 0 32upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.my-prize-dialog  .no-prize{
		padding: 40upx 0;
	}
	
	.mission-title{
		width:90%;
		margin:10px 5%;
	}
	
	.mission-list{
		position: relative;
		z-index: 3;
		text-align: center;
		color:#ffffff;
		width:90%;
		margin:0 5% 50upx 5%;
	}
	
	.mission-list .title{
		margin-top:50upx;
		background-color: #FD9383;
		border: 1upx solid #FFFFFF;
	}
	.mission-list .title view{
		border-right: 1upx solid #FFFFFF;
		padding:15upx 10upx;	
	}
	.mission-list .title view:nth-child(3){
		border-right: 0upx solid #FFFFFF;
	}
	
	
	.mission-list .mission{
		border: 1upx solid #FFFFFF;
		border-top: 0upx solid #FFFFFF;
		line-height: 60upx;
		height:100upx;
	}
	.mission-list .mission view{
		border-right: 1upx solid #FFFFFF;
		padding:20upx 10upx;	
	}
	.mission-list .mission view:nth-child(3){
		border-right: 0upx solid #FFFFFF;
	}
	
	.mission-list .mission .mission-button{
		width:100upx;
		height:50upx;
		line-height: 50upx;
		padding:5upx 10upx;
		display: inline-block;
		background-color: #FDF3AB;
		color:#FD302D;
		font-size: 30upx;
		border-radius: 8upx;
	}
	
	
	.mission-list .mission .mission-button.disabled{
		background-color: #BEBEBE;
		color: #FFFFFF;
	}
</style>
